import React, {Component} from 'react'
import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
import {AtNavBar} from 'taro-ui'
import './index.scss'

/**
 * 渲染组件
 */
class Navbar extends Component {

    constructor(props) {
        super(props)
        this.state = {
            paddingTop: ''
        }
    }

    componentDidMount() {
        Taro.getSystemInfo({
            success: res => {
                console.log(res.statusBarHeight)
                this.setState({
                    paddingTop: res.statusBarHeight + 'px',
                })
            }
        })
    }

    handleClick(leftFunction, delta, url) { // 如果需要其他的路由,可以在此自己添加
        switch (leftFunction) {
            case 'navigateBack':
                Taro.navigateBack({
                    delta: delta ? delta : 1
                })
                break;
            case 'navigateTo':
                Taro.navigateTo({
                    url
                })
                break;
            case 'switchTab':
                Taro.switchTab({
                    url
                })
                break;
            default:
                Taro.navigateBack()
        }
    }

    render() {
        let {paddingTop} = this.state

        const {title, bgColor, icon, color, leftFunction, delta, url} = this.props

        return (
            <View className='navbar' style={{paddingTop: paddingTop, height: '88rpx'}}>
                <AtNavBar
                    customStyle={{
                        background: bgColor ? bgColor : '#4a90e2',
                        paddingTop: paddingTop,
                    }}
                    color={color ? color : '#fff'}
                    onClickLeftIcon={() => this.handleClick(leftFunction, delta, url)}
                    title={title}
                    leftIconType={icon}
                    fixed
                />
            </View>
        )
    }
}

export default Navbar
